<template>
    <div>
         <van-nav-bar
            title="更多商品"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            >
             <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
        <van-row>
            <van-col span="3">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item v-for="(item,index) in types" :key="index" :title="item.typeName" @click="onType(item)" />
                </van-sidebar>
            </van-col>
            <van-col span="21">
                <googs-list :goodstop5="goods"></googs-list>
            </van-col>
        </van-row> 
        <div class="fenye">
            <van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
        </div>
    </div>

</template>

<script>
import { Notify,g } from 'vant';
export default {
data(){
    return{
        activeKey: 0,
        types:[],
        goods:[],
        currentType:this.$route.query.typeId,
        currentPage:1,
    }
},

created:function(){
    this.$axios
    .get("/goods/typelist")
    .then(res => {
        if (res.data.code == 200) {
            this.types = res.data.info;
            //console.log(this.images);
        }
    })
    .catch(error => {
        console.log("请求商品数据失败了")
    });

    this.$axios
        .get("/goods/listType?type="+this.currentType)
        .then(res => {
            if (res.data.code == 200) {
                this.goods = res.data.info;
                //console.log(this.images);
            }
        })
        .catch(error => {
            console.log("请求商品数据失败了")
        });

},

methods: {
    onType(item) {
        Notify({ type: 'primary', message: item.typeName });
        this.currentType=item.typeId;
        this.$axios
        .get("/goods/listType?type="+item.typeId)
        .then(res => {
            if (res.data.code == 200) {
                this.goods = res.data.info;
                //console.log(this.images);
            }
        })
        .catch(error => {
            console.log("请求商品数据失败了")
        });
    },

    onClickLeft: function () {
        this.$router.go(-1);
    },


},

}
</script>

<style scoped>
.fenye{
 margin-bottom:50px ;
 margin-top: 5px;
}
</style>